<nz-card class="list_card" [nzTitle]="cardTitle" [nzExtra]="extraTemplate">


  <!-- 检索表单 -->
  <form nz-form [nzLayout]="'vertical'" (ngSubmit)="refresh()">
    <nz-row nzGutter="8">
      <nz-col nzSm="12">
        <nz-form-item>
          <nz-form-label>
            关键字
          </nz-form-label>
          <nz-form-control>
            <nz-input-group nzSearch [nzSuffix]="suffixButton">
              <input type="text" nz-input [(ngModel)]="keyword" (keyup.enter)="refresh()" name="keyword" [placeholder]="'搜索...'">
              <ng-template #suffixButton>
                <button nz-button nzType="primary" nzSearch type="submit">
                  <i class="anticon anticon-search"></i>
                </button>
              </ng-template>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzSm="12">
        <nz-form-item>
          <nz-form-label>
            父级
          </nz-form-label>
          <nz-form-control>
            <cloumn-parent-combo [isFindRoot]="'true'" placeholder="请选择父级" [(selectedCloumn)]="selectedCloumn"
              (selectedCloumnChange)="refresh()"></cloumn-parent-combo>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>

    <nz-row nzGutter="8" *ngIf="advancedFiltersVisible">
      <nz-col nzSm="6">
        <nz-form-item>
          <nz-form-label>
            创建日期范围
          </nz-form-label>
          <nz-form-control>
            <nz-range-picker name="CreateDateRange" [(ngModel)]="createStartToEndDate" [nzPlaceHolder]="['开始日期','结束日期']"
              (ngModelChange)="dateRangeChange()"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzSm="6"></nz-col>
      <nz-col nzSm="6">
        <nz-form-item>
          <nz-form-label>
            修改日期范围
          </nz-form-label>
          <nz-form-control>
            <nz-range-picker name="UpdateDateRange" [(ngModel)]="updateStartToEndDate" [nzPlaceHolder]="['开始日期','结束日期']"
              (ngModelChange)="dateRangeChange()"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>

    <nz-row nzGutter="8" *ngIf="advancedFiltersVisible">
      <nz-col nzSm="12">
        <nz-form-item>
          <nz-form-label>
            是否启用
          </nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="isEnable" name="isEnable" [nzPlaceHolder]="'请选择启用状态'" nzAllowClear (ngModelChange)="isEnableChange()">
              <nz-option [nzLabel]="'全部'" nzValue=""></nz-option>
              <nz-option [nzLabel]="'是'" nzValue="true"></nz-option>
              <nz-option [nzLabel]="'否'" nzValue="false"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzSm="12">
        <nz-form-item>
          <nz-form-label>
            是否授权
          </nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="isAuthorize" name="isAuthorize" [nzPlaceHolder]="'请选择授权状态'" nzAllowClear
              (ngModelChange)="isisAuthorizeChange()">
              <nz-option [nzLabel]="'全部'" nzValue=""></nz-option>
              <nz-option [nzLabel]="'是'" nzValue="true"></nz-option>
              <nz-option [nzLabel]="'否'" nzValue="false"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>
  </form>

  <!-- 操作部分 -->
  <nz-row nzGutter="8">
    <nz-col nzMd="20" nzSm="12" class="btn-gutter">
    </nz-col>
    <nz-col nzMd="4" nzSm="12" class="text-right">
      <a (click)="advancedFiltersVisible=!advancedFiltersVisible">
        显示高级过滤
        <i class="anticon" [class.anticon-down]="!advancedFiltersVisible" [class.anticon-up]="advancedFiltersVisible"></i>
      </a>
    </nz-col>
  </nz-row>

  <nz-table #nzTable [nzData]="tableHelper.records" (nzPageSizeChange)="searchData(true)" [nzLoading]="tableHelper.isLoading"
    (nzPageIndexChange)="searchData()" [nzFrontPagination]="false" [nzTotal]="tableHelper.totalRecordsCount"
    [(nzPageIndex)]="tableHelper.pageIndex" [(nzPageSize)]="tableHelper.defaultPageSize" nzNoResult="暂无数据">
    <thead (nzSortChange)="sort($event)">
      <tr>
        <th nzShowSort nzSortKey="title">标题</th>
        <th nzShowSort nzSortKey="columnType">类型</th>
        <th nzShowSort nzSortKey="isActive">启用</th>
        <th nzShowSort nzSortKey="isNeedAuthorizeAccess">授权</th>
        <th nzShowSort nzSortKey="url">链接</th>
        <th nzShowSort nzSortKey="creationTime">创建时间</th>
        <th nzWidth="220px">操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-template ngFor let-data [ngForOf]="nzTable.data">
        <ng-template ngFor let-item [ngForOf]="expandDataCache[data.id]">
          <tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
            <td [nzIndentSize]="item.level*5" [nzShowExpand]="!!item.childs && item.childs.length > 0" [(nzExpand)]="item.expand"
              (nzExpandChange)="collapse(expandDataCache[data.id],item,$event)">
              {{item.title}}
            </td>
            <td>{{getColumnTypeText(item.columnType)}}</td>
            <td>
              <nz-switch [ngModel]="item.isActive" nzCheckedChildren="是" nzUnCheckedChildren="否" (ngModelChange)="clickIsActiveSwitch(item)"></nz-switch>
            </td>
            <td>
              <nz-switch [ngModel]="item.isNeedAuthorizeAccess" nzCheckedChildren="是" nzUnCheckedChildren="否"
                (ngModelChange)="clickIsNeedAuthorizeAccessSwitch(item)"></nz-switch>
            </td>
            <td>{{item.url}}</td>
            <td>{{item.creationTime ? (item.creationTime | date:'yyyy-MM-dd') : '-'}}</td>
            <td class="table_operate">
              <!-- 编辑 -->
              <ng-container *ngIf="isGranted('Pages.ColumnInfo.Edit')">
                <a (click)="editBuildingPlan(item)">
                  <i nz-icon [type]="'edit'" theme="fill"></i> 编辑
                </a>
                <nz-divider nzType="vertical"></nz-divider>
              </ng-container>
              <!-- 删除 -->
              <ng-container *ngIf="isGranted('Pages.ColumnInfo.Delete')">
                <nz-popconfirm nzTitle="是否确定删除此项？" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="deleteConfirm(item.id)">
                  <a nz-popconfirm>
                    <i nz-icon [type]="'delete'" theme="fill"></i>
                    删除
                  </a>
                </nz-popconfirm>
              </ng-container>
            </td>
          </tr>
        </ng-template>
      </ng-template>
    </tbody>
  </nz-table>
</nz-card>

<ng-template #cardTitle>
  <div class="card_title">
    <i style="margin-right: 10px" nz-icon [type]="'column'" theme="fill"></i> 栏目管理
  </div>
</ng-template>

<ng-template #extraTemplate>
  <div class="tab_operate" *ngIf="isGranted('Pages.ColumnInfo.Create')">
    <a (click)="createBuildingPlan()">创建</a>
  </div>
</ng-template>